<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=no">
	<meta name="format-detection" content="telphone=no, email=no"/>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<title>环保数据管家-声环境</title>
	<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
	<link rel="stylesheet" type="text/css" href="assets/css/app.css">
	<link rel="stylesheet" type="text/css" href="assets/css/voice.css">
</head>
<body>
	<div class="pf-content">
		<h1 class="h_tit">
			<span class="tit_icon car_icon"></span>
			<span>2016年交通噪声统计</span>
		</h1>
		<div class="voice_table">
			<table>
				<thead>
					<tr>
						<td width="20%" rowspan="2" colspan="0">区域</td>
						<td width="20%" rowspan="2" colspan="0">均值</br>(dB)</td>
						<td width="20%" rowspan="2" colspan="0">同比</br>(dB)</td>
						<td width="40%" colspan="2" rowspan="0">达标路段（低于70dB）</td>
					</tr>
					<tr>
						<td>占比</td>
						<td>同比</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>城区</td>
						<td>68.3</td>
						<td>0.5 <span class="compare-icon up"></span></td>
						<td>76.2%</td>
						<td>1.4 <span class="compare-icon up"></span></td>
					</tr>
					<tr>
						<td>郊区</td>
						<td>68.0</td>
						<td>0.1 <span class="compare-icon up"></span></td>
						<td></td>
						<td></td>
					</tr>
				</tbody>
			</table>
			<div class="year-chart">
				<p class="chart-title"> 年度趋势 </p>
				<div class="chart-box" id="car-chart"></div>
			</div>
		</div>
		<h1 class="h_tit">
			<span class="tit_icon building_icon"></span>
			<span>2016年市区域环境噪声统计</span>
		</h1>
		<div class="voice_table no-border">
			<table>
				<thead>
					<tr>
						<td width="20%" rowspan="2" colspan="0">区域</td>
						<td width="20%" rowspan="2" colspan="0">均值</br>(dB)</td>
						<td width="20%" rowspan="2" colspan="0">同比</br>(dB)</td>
						<td width="40%" colspan="2" rowspan="0">一级标准覆盖率</td>
					</tr>
					<tr>
						<td>占比</td>
						<td>同比</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>城区</td>
						<td>53.9</td>
						<td></td>
						<td>72.7%</td>
						<td>4.2 <span class="compare-icon up"></span></td>
					</tr>
					<tr>
						<td>郊区</td>
						<td>53.8</td>
						<td>0.8 <span class="compare-icon down"></span></td>
						<td></td>
						<td></td>
					</tr>
				</tbody>
			</table>
			<div class="year-chart">
				<p class="chart-title"> 年度趋势 </p>
				<div class="chart-box" id="building-chart"></div>
			</div>
		</div>
	</div>
	<footer id="public_footer">
		<ul>
			<li>
				<a href="index.html">
					<span class="foot_pic air"></span>
					<span>大气环境</span>
				</a>
			</li>
			<li>
				<a href="water-environment.html">
					<span class="foot_pic water"></span>
					<span>水环境</span>
				</a>
			</li>
			<li class="active">
				<a href="voice-environment.html">
					<span class="foot_pic voice"></span>
					<span>声环境</span>
				</a>
			</li>
		</ul>
	</footer>
</body>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/highcharts.js"></script>
<script src="assets/echart/echarts.min.js"></script>
<script src="assets/echart/macarons.js"></script>
<script type="text/javascript">
	var carChart = echarts.init(document.getElementById('car-chart'),"macarons");
	var builingChart = echarts.init(document.getElementById('building-chart'),"macarons");
     option = {
	    legend: {     
	    	left: 'right',
	        data:['城区','郊区']
	    },
	    tooltip : {
	        trigger: 'axis'
	    },
	    grid: {
	        left: '5%',
	        right: '5%',
	        containLabel: true
	    },
	    xAxis : [
	        {
	            type : 'category',
	            boundaryGap : false,
	            data : ['2013','2014','2015','2016']
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value',
	            min: 65,
	            max: 70,
	            axisLabel : {
	                formatter: '{value}'
	            }
	        }
	    ],
	    series : [
	        {
	            name:'城区',
	            type:'line',
	            data:[68.4, 67.2, 67.8,68.3],
	           
	        },
	        {
	            name:'郊区',
	            type:'line',
	            data:[66.8, 67.6, 67.9,68.0],
	            
	        }
	    ]
	};
	option2 = {
	    legend: {     
	    	left: 'right',
	        data:['城区','郊区']
	    },
	    grid: {
	        left: '5%',
	        right: '5%',
	        containLabel: true
	    },
	    tooltip : {
	        trigger: 'axis'
	    },
	    xAxis : [
	        {
	            type : 'category',
	            boundaryGap : false,
	            data : ['2013','2014','2015','2016']
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value',
	            min: 50,
	            max: 58,
	            axisLabel : {
	                formatter: '{value}'
	            }
	        }
	    ],
	    series : [
	        {
	            name:'城区',
	            type:'line',
	            data:[54.7, 53.8, 54.8,53.9],
	           
	        },
	        {
	            name:'郊区',
	            type:'line',
	            data:[51.4, 51.1, 54.6,53.8],
	            
	        }
	    ]
	};
    carChart.setOption(option);                                
    builingChart.setOption(option2);                                
</script>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan style='display:none;' id='cnzz_stat_icon_1259663983'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1259663983' type='text/javascript'%3E%3C/script%3E"));</script>
